<template>
<div>
  <div class="pdfBox">
    <pdf
      class="pdf"
      v-for="i of pageCount"
      :src="src"
      :page="i">
    </pdf>
  </div>
<!--  <div class="pageButton">-->
<!--    <el-button size="mini" @click="changePage(0)" round>上一页</el-button>-->
<!--    <span> {{currentPage}} / {{pageCount}} </span>-->
<!--    <el-button size="mini" @click="changePage(1)" round>下一页</el-button>-->
<!--  </div>-->
</div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: "jPdf",
  props:{
    src:{
      type:String,
      default:null
    }
  },
  components:{pdf},
  watch:{
    src(n,o){
      this.loadingTask = pdf.createLoadingTask(n);
      console.log(this.loadingTask)
      this.loadingTask.promise.then(pdf => {
        this.pageCount = pdf.numPages;
      });
    }
  },
  created() {
    this.loadingTask = pdf.createLoadingTask(this.src);
    console.log(this.loadingTask)
    this.loadingTask.promise.then(pdf => {
      this.pageCount = pdf.numPages;
    });
  },
  data(){
    return{
      currentPage: 0, // 页码
      pageCount: 0, // 总页数
    }
  },
  methods:{
    // 翻页
    changePage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage --;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage ++;
      }
    },
    // pdf加载时
    loadPdf () {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
  }
}
</script>

<style lang="scss" scoped>
.pdfBox{
  height: 500px;
  overflow: auto;
}
.pdf{
  border: rgba(200,200,200,0.4) 1px solid;
  margin-bottom: 10px;
}
</style>
